﻿<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <title>我的标签</title>
  <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
  <link rel="stylesheet" type="text/css" href="../css/base.css">
  <link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<style>
 .label-set{display:flex;display:-webkit-box;display:-webkit-flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:wrap}
.label-set-item{display:flex;display:-webkit-box;display:-webkit-flex;justify-content:space-around;align-items:center;position:relative;margin-left: 3%;margin-top: 18px;}
.label-set-item:after{height:40px;width:0;border-left:1px dashed #4d4d4d;content:'';position:absolute;left:75%}
.close{top: -8px;left: 90%;width: 25px;height: 25px;}
.btn-add {width:90%;margin:auto;margin-top:100px;color:white;background:#ff8427;}
.tagname {border:0;}
.label-list{justify-content: flex-start;flex-wrap:wrap;width: 100%;margin: auto;}
.make-button{position: fixed;bottom: 0;width: 100%;padding: 15px 0;color: #fff;}
</style>

<body>
  <div class="container" style="margin-bottom: 50px;">
      <!--标签列表-->
    <div class="label-set mb25 label-list">
        <div class="" style="text-align:left">

        </div>
     
    </div>
    <div class="make-button">
      <a href="javascript:;" class="weui-btn weui-btn_primary btn-add">新增标签</a>
    </div>

      <div id="dialog" style="display:none;">
          <div class="weui-mask"></div>
          <div class="weui-dialog">
              <div class="weui-dialog__hd" style="padding-bottom:10px;">
                  <strong class="weui-dialog__title">新建标签</strong>
              </div>
              <div class="weui-dialog__bd">
                  <input type="text" class="lh30 tagname" />            
             </div>
              <div class="weui-dialog__ft">
                  <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="closeDialog()">取消</a>
                  <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="addTag()">确定</a>
              </div>
          </div>
      </div>
  </div>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/base.js"></script>
    <script>
        $(function () {
            load()
        })

        function load() {
            var html = "";
            ajaxGet(siteApiList.StaffTagList + "?staffId=" + staffId, function (data) {
                if (!isJsonSuccess(data))
                    return;

                var list = data.Data;
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    var tagname = (item.TagName).substr(0,7);
                    html += "<div class='label-set-item h40  mt25 br5' style='background:#c8c9c9;width:45%;'><span style='width:70%;text-align:center'>" +  tagname + "</span><span style='width:20%;text-align:center'>"  + item.UpCount + "</span>";
                    html += "<img class='pa close btn-delete' data-id=" + item.Id + " src='../images/pk/close.png'></div>"
                }
                $(".label-list").html(html)
                loadBtn();
            })
        }

        function loadBtn() {
            $(".btn-delete").click(function () {
                delLabel($(this).attr("data-id"));
            });

            $(".btn-add").click(function () { showDialog() })
        }

        //添加标签
        function addTag() {
            var tagName = $(".tagname").val();
            if (trim(tagName) == "") {
                closeDialog();
                Alert("请填写标签名称");
                return;
            }
            ajaxPost(siteApiList.AddStaffTag, "staffId=" + staffId + "&tagName=" + tagName, function (data) {
                closeDialog();
                if (!isJsonSuccess(data))
                    return;
                load();
            });
        }

        //删除标签
        function delLabel(id) {
            if (!confirm('确认删除'))
                return;

            ajaxPost(siteApiList.DeleteStaffTag, "id=" + id + "&staffid=" + staffId, function (data) {
                if (!isJsonSuccess(data))
                    return;
                load();
            });
        }

        function showDialog() {
            $('#dialog').css('display', '');
            $(".tagname").focus();
        }
        function closeDialog() {
            $('#dialog').css('display', 'none');
        }
    </script>
</body>

</html>
